class BiShun {
    writerSize = 73;
    data = [];

    constructor(writerSize, data) {
        this.writerSize = writerSize;
        this.checkDate(data);
        this.index = 0;
    }

    checkDate = (data) => {
        for (let i = 0; i < data.length; i++) {
            if ((/[\u4e00-\u9fa5]/).test(data[i])) {
                this.data.push(data[i]);
            }
        }
    }

    init = () => {
        this.drawPaper();
        this.hzToWriter();
        $(".button-previous").on("click", () => this.previousItem());
        $(".button-next").on("click", () => this.nextItem());
    }

    drawPaper = () => {
        const itemHtml = this.getItemHtml('item-' + this.index);
        $("#paper-box").append(itemHtml);
    }

    hzToWriter = () => {
        if (this.index < this.data.length) {
            const hanZi = this.data[this.index];
            this.addHanZiWriter(hanZi, this.index);
        }

    }

    addHanZiWriter = (hanZi, index) => {
        const writer = HanziWriter.create('item-' + index, hanZi, {
            width: this.writerSize,
            height: this.writerSize,
            padding: 5,
            showCharacter: false,
        });
        writer.s
    }

    getItemHtml = (id) => {
        return `<svg xmlns="http://www.w3.org/2000/svg" width="` + this.writerSize + `" height="` + this.writerSize + `" class="font-box" id="` + id + `">
            <line x1="0" y1="0" x2="` + this.writerSize + `" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="` + this.writerSize + `" y1="0" x2="0" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="` + this.writerSize / 2 + `" y1="0" x2="` + this.writerSize / 2 + `" y2="` + this.writerSize + `" stroke="#DDD" />
            <line x1="0" y1="` + this.writerSize / 2 + `" x2="` + this.writerSize + `" y2="` + this.writerSize / 2 + `" stroke="#DDD" />
        </svg>
    `;
    }

    previousItem = () => {
        if (this.index - 1 >= 0) {
            this.index -= 1;
            this.refreshZiWriter();
            $(".button-next").attr("disabled",false);
        }else{
            $(".button-previous").attr("disabled",true);
        }
    }

    nextItem = () => {
        if (this.index + 1 < this.data.length) {
            this.index += 1;
            this.refreshZiWriter();
            $(".button-previous").attr("disabled",false);
        }else{
            $(".button-next").attr("disabled",true);
        }
    }

    const
    refreshZiWriter = () => {
        $("#paper-box").html("");
        this.drawPaper();
        this.hzToWriter();

    }
}
